<template>
  <div>
    <tab
      custom-bar-width="20px"
      :line-width="3"
    >
      <tab-item
        :selected="active === 1"
        @on-item-click="onItemClick(1)"
      >
        <p class="ptxt">我是学员</p>
      </tab-item>
      <tab-item
        :selected="active === 2"
        @on-item-click="onItemClick(2)"
      >
        <p class="ptxt">我是老师</p>
      </tab-item>
    </tab>
    <div
      ref="slide"
      :style="`height:${WinHeight}px;width:${WinWidth}px`"
      class="slides"
    >
      <div
        class="slide-group"
        ref="slideGroup"
        :style="`width:${2 * 100}%`"
      >
        <div
          class="item"
          v-for="(item,index) in 2"
          :key="index"
          :style="`height:${WinHeight}px;width:${WinWidth}px`"
        >
          <section
            style="width:100%;overflow: hidden;"
            v-if="active===index+1"
          >
            <div class="student">
              <div
                v-if="non"
                class="none-one"
              >
                <no-assessment text='暂无帮助'></no-assessment>
              </div>
              <div
                class="hahaha"
                v-for="(item,index) in listArr"
                :key="index"
                :class="index % 2 ? '': 'asd'"
                @click="gogogo(item)"
              >
                <div class="helpcenter_left">
                  <img
                    :src="item.icon"
                    alt
                  >
                </div>
                <div class="helpcenter_right">
                  <div>{{item.fication_name}}</div>
                  <div class="txt2">{{item.fication_desc}}</div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
import { Tab, TabItem } from 'vux'
import { listfic } from '@/api/center'
import noAssessment from '@/components/public/noassessment'
export default {
  components: { Tab, TabItem, noAssessment },
  data () {
    return {
      WinHeight: '',
      WinWidth: '',
      osos: '',
      non: false,
      listArr: [],
      A123: 1
    }
  },
  watch: {
    osos (v) {
      this.A123 = this.slide.getCurrentPage().pageX + 1
      this.$store.commit('active', this.A123)
      this.listArr = []
      this.getinfo()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.WinHeight = document.documentElement.clientHeight - 97
      this.WinWidth = document.documentElement.clientWidth
      this.initTab()
    })
  },
  computed: {
    ...mapState({
      active: state => state.active
    })
  },
  //   Zmli  type
  created () {
    console.log(this.active)
    this.getinfo()
  },
  methods: {
    initTab () {
      let _this = this
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        pullUpLoad: {
          threshold: 0
        },
        snap: {
          loop: false,
          threshold: 0,
          speed: 300
        },
        bounce: false,
        stopPropagation: true,
        click: true
      })
      this.slide.on('scrollEnd', function (ob) {
        _this.osos = ob.x
      })
    },
    gogogo (item) {
      this.$router.push({
        path: '/help/helpin',
        query: {
          fication_id: item.fication_id
        }
      })
      // console.log(item.fication_id)
    },
    onItemClick (ind) {
      console.log(ind - 1)
      this.slide.goToPage(ind - 1)
      // this.$store.commit('active', ind)
      // if (this.A123 === ind) {
      //   return false
      // }
      // this.A123 = ind
      // this.getinfo()
    },
    getinfo () {
      this.A123 = this.active
      var obj = {
        app_id: 'Zmli',
        type: this.A123
      }
      listfic(obj)
        .then(res => {
          this.$store.commit('updateLoadingStatus', { isLoading: false })
          let temp = res.data
          if (temp.code === 200) {
            this.listArr = temp.data
            console.log(temp.data)
            this.non = false
            if (this.active === 2) {
              setTimeout(() => {
                this.slide.goToPage(2 - 1)
                console.log(123321)
              }, 100)
            }
          } else {
            this.listArr = []
            this.non = true
          }
        })
    }
  }
}
</script>
<style  scoped>
.vux-tab .vux-tab-item.vux-tab-selected {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  text-align: center;
}
.slides {
  width: 100%;
  overflow: hidden;
}
.slide-group {
  display: flex;
}
.hahaha {
  float: left;
  width: 50%;
  height: 75px;
  padding-left: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: solid 1px #f0f0f0;
}
.helpcenter_left {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 6px;
}
.txt2 {
  margin-top: 2px;
}
.ptxt {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}
.helpcenter_right > div:first-of-type {
  font-family: PingFangSC-Semibold;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
  color: #1a1a1a;
}
.helpcenter_right > div:last-of-type {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #1a1a1a;
}
.asd {
  border-right: solid 1px #f0f0f0;
}
.none-one {
  position: fixed;
  top: 20%;
}
</style>
